{include file="common/pc/header" title="登录" /}

{if condition="isset($siteConfig['loginBk'])"}
<style>
    body {
        background-image: url({$siteConfig.loginBk});
        background-size: cover;
        background-position: 50% 50%;
    }
</style>
{/if}
<style>
    body {
        height: 100vh;
        background-color: #f2f2f2;
    }

    .login-container {
    }

    .login-container .captcha-verify input[name='code'] {
        width: calc(100% - 90px);
    }

    .login-container .captcha-verify img.captcha {
        height: 36px;
        width: 90px;
        position: absolute;
        right: 0px;
        margin-top: -38px;
        border: solid 1px rgb(230, 230, 230);
        cursor: pointer;
    }

    .login-main {
        width: 435px;
        margin: 0 auto;
        box-sizing: border-box;
        height: 455px;
        margin-top: calc(50vh - 250px);
        background: rgba(255, 255, 255, 1);
        padding: 30px;
        border-radius: 5px;
        position: absolute;
        margin-left: calc(50vw - 220px);
    }

    .login-header {
        text-align: center;
    }

    .login-header p {
        font-weight: 300;
        color: #000;
        line-height: 40px;
    }

    .login-footer {
        text-align: center;
    }

    .login-main .layui-form {
        padding-top: 25px;
    }

    .login-main .layui-form-item .layui-input-inline {
        width: 246px;
        margin-right: 0px;
    }

    .login-main .layui-tab-title li {
        padding: 0px;
    }

    .login-main .layui-tab {
        margin: 0px;
    }

    .login-main .layui-tab .layui-tab-content {
        margin-top: 10px;
    }
</style>


<div class="login-container">
    <div class="login-main">
        <div class="login-header">
            <h2>{$enterprise.title}</h2>
            <p>{$siteConfig.siteSlogan}</p>
        </div>
        <div class="login-body">
            <div class="layui-tab layui-tab-brief" lay-filter="loginTab">
                <ul class="layui-tab-title">
                    {if condition="$loginType['ding'] && !empty($enterprise['corpid'])"}
                    <li lay-id="ding">钉钉扫码登录</li>
                    {/if}
                    {if condition="$loginType['mobile']"}
                    <li lay-id="mobile">手机号登录</li>
                    {/if}
                    {if condition="$loginType['username']"}
                    <li lay-id="username">账号密码登录</li>
                    {/if}
                </ul>
                <div class="layui-tab-content">
                    {if condition="$loginType['ding'] && !empty($enterprise['corpid'])"}
                    <div class="layui-tab-item">
                        <!-- 钉钉扫码登录 -->
                        {include file="enterprise/user/login_component/pc_ding"}
                    </div>
                    {/if}
                    {if condition="$loginType['mobile']"}
                    <div class="layui-tab-item">
                        <!-- 手机号登录 -->
                        {include file="enterprise/user/login_component/pc_mobile"}
                    </div>
                    {/if}
                    {if condition="$loginType['username']"}
                    <div class="layui-tab-item">
                        <!-- 账号密码登录 -->
                        {include file="enterprise/user/login_component/pc_username"}
                    </div>
                    {/if}
                </div>
            </div>
        </div>

        <div class="login-footer">
            Powered By © Ding.Zone
        </div>
    </div>
</div>

<script>
    layui.use('element', function () {
        layui.element.tabChange('loginTab', $(".layui-tab-title li").first().attr("lay-id"));
        layui.element.on('tab(loginTab)', function () {
            $("img.captcha").click();
        });
    });
    //可用的登录类型个数
    var avaliableLoginTypeCount = $(".login-main .layui-tab-title li").length;
    if (avaliableLoginTypeCount <= 1) {
        $(".login-main .layui-tab-title").hide();
    } else {
        $(".login-main .layui-tab-title li").css("width", (100 / avaliableLoginTypeCount) + "%");
    }
</script>


{include file="common/pc/footer"/}